<template>
	<view>
		<!-- 列表 -->
		<view v-for="(equ,index) in device" :key="index" @click="zishebei(equ)">
			<view class="list">
				<view class="image">
					<view>
						<image :src="equ.iconUrl"></image>
					</view>
					<view class="text">{{equ.name}}</view>
				</view>

				<!-- 水浸 -->
				<view class="right" v-if="equ.zigBeeWifi==false&&equ.productId=='u53tqzme'">
					<!-- 		<view class="texts" v-if="equ.dps[1]=='normal' "><text>正常</text></view>
					<view class="texts" v-if="equ.dps[1]=='alarm' "><text>警告</text></view> -->
					<view v-if="equ.dps[1]=='normal' ">水浸检查状态:<text>正常</text></view>
					<view v-if="equ.dps[1]=='alarm' "><text>水浸检查状态:警告</text></view>
					<view>电池电量百分比:<text>{{equ.dps[4]}}</text></view>
					<!-- <view><text>电池电量百分比</text></view> -->
				</view>

				<!-- 门磁 -->
				<view class="right" v-if="equ.zigBeeWifi==false&&equ.productId=='bfrz3oq5'">
					<view v-if="equ.dps[101]==true ">门磁状态:<text>开</text></view>
					<view v-if="equ.dps[101]==false ">门磁状态:<text>关</text></view>
					<!-- <view><text>门磁状态</text></view> -->
					<view>电磁电量百分比:<text>{{equ.dps[103]}}</text></view>
					<!-- <view><text>电磁电量百分比</text></view> -->
				</view>

				<!-- 门磁 -->
				<view class="right" v-if="equ.zigBeeWifi==false&&equ.productId=='f1hmoyj4'">
					<view v-if="equ.dps[1]==true ">门磁状态:<text>开</text></view>
					<view v-if="equ.dps[1]==false ">门磁状态:<text>关</text></view>
					<!-- <view><text>门磁状态</text></view> -->
					<view>电磁电量百分比:<text>{{equ.dps[2]}}</text></view>
					<!-- <view><text>电磁电量百分比</text></view> -->
				</view>


				<!-- 空调伴侣 -->
				<view class="right" v-if="equ.zigBeeWifi==false&&equ.productId=='n8afsq8gh3zwoupn'">
					<!-- 	<view class="texts"><text>{{equ.dps[102]}}</text></view>
					<view><text>模式</text></view> -->
					<view v-if="equ.dps[101]==true ">电源:<text>开</text></view>
					<view v-if="equ.dps[101]==false ">电源:<text>关闭</text></view>
					<!-- <view><text>电源</text></view> -->
				</view>

				<!-- 空调伴侣 -->
				<view class="right" v-if="equ.zigBeeWifi==false&&equ.productId=='uch4vwjnyvjkph8u'">
					<!-- 	<view class="texts"><text>{{equ.dps[102]}}</text></view>
					<view><text>模式</text></view> -->
					<view v-if="equ.dps[13]==true ">电源:<text>开</text></view>
					<view v-if="equ.dps[13]==false ">电源:<text>关闭</text></view>
					<!-- <view><text>电源</text></view> -->
				</view>


				<!-- 空调 -->
				<view class="right" v-if="equ.zigBeeWifi==false&&equ.productId=='jllh2kdbGM0QTdf1'">
					<view v-if="equ.dps[102]==0"  >模式:<text>制冷</text></view>
					<!-- <view><text>模式</text></view> -->
					<view v-if="equ.dps[101]==true ">开关:<text>开</text></view>
					<view v-if="equ.dps[101]==false ">开关:<text>关闭</text></view>
					<!-- <view><text>开关</text></view> -->
				</view>

				<!-- 温湿度 -->
				<view class="rights" v-if="equ.zigBeeWifi==false&&equ.productId=='nau60otv'||equ.productId=='kchagk8y'">
					<view >当前温度值:<text>{{equ.valueText}}</text></view>
					<!-- <view><text>当前温度值</text></view> -->
					<view>当前湿度值:<text>{{equ.valueTexts}}</text></view>
					<!-- <view><text>当前湿度值</text></view> -->
					<view>电池电量百分比:<text>{{equ.dps[4]}}</text></view>
					<!-- <view><text>电池电量百分比</text></view> -->
				</view>

				<!-- 烟雾 -->
				<view class="rights" v-if="equ.zigBeeWifi==false&&equ.productId=='qy1z1a8z'">
					<view v-if="equ.dps[1]=='normal' ">烟雾检测状态:<text>正常</text></view>
					<view v-if="equ.dps[1]=='alarm' ">烟雾检测状态:<text>警告</text></view>
					<!-- <view><text>烟雾检测状态</text></view> -->
					<view v-if="equ.dps[9]=='check_success' ">设备自检结果:<text>正常</text></view>
					<view v-if="equ.dps[9]!='check_success' ">设备自检结果:<text>损坏</text></view>
					<!-- <view><text>设备自检结果</text></view> -->
					<view v-if="equ.dps[14]=='high' ">电池电量状态:<text>高</text></view>
					<view v-if="equ.dps[14]!='high' ">电池电量状态:<text>底</text></view>
					<!-- <view><text>电池电量状态</text></view> -->
				</view>

				<view v-if="equ.zigBeeWifi==false" class="lixian_l">
					<view v-if="equ.isOnline==true" class="dian">
						<view></view>在线
					</view>
					<view v-if="equ.isOnline==false" class="dians">
						<view></view>离线
					</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				uniqueNo: "",
				family: [],
				homeId: "",
				device: [{
					valueText: "",
					valueTexts: "",
					// productIds:""
				}],
				family: [],
				home: "",
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.uniqueNo = option.uniqueNo;
			// console.log(option.uniqueNo)
		},
		onShow() {
			this.title();
			this.homeList();
		},
		methods: {
			title() {
				uni.setNavigationBarTitle({
					title: this.uniqueNo + "家庭信息"
				});
			},
			async homeList() {
				// console.log(this.uniqueNo)
				try {
					uni.showLoading({
						title: '正在加载家庭信息'
					});
					const res = await this
						.$request({
							url: '/api-iot/home/' + this.uniqueNo + '/info',
							method: 'get'
						});
					uni.hideLoading(); //加载结束
					if (res.success == true) {
						this.family = res.body.command;
						this.getSheBei(this.family);
						// console.log(this.family)
					} else { //加载失败
						uni.showToast({
							title: '家庭信息加载失败',
							duration: 2000
						});
					}
				} catch (e) { //如果涂鸦智能无法连接
					uni.hideLoading(); //加载结束
					uni.showToast({
						title: '家庭信息加载失败,请稍后再试',
						duration: 2000
					});
				}

			},
			getSheBei(family) {
				try {
					uni.showLoading({
						title: '正在加载设备列表'
					});
					const homeModule = uni.requireNativePlugin("LJY-HomeModule"); //调用android中自定义的插件名称
					const ret = homeModule.homeDetail({ //login表示自定义插件的函数名，第一个表示要传递的参数
						homeId: family.homeId
					});
					// console.log(ret)
					uni.hideLoading(); //加载结束
					if (ret.code == 0) { //加载成功
						this.device = ret.data.deviceList;
						// console.log(ret.data.deviceList.dps[1])

						// console.log(this.device.productId)
						for (var i = 0; i < this.device.length; i++) {
							// equ.productId=='nau60otv'||equ.productId=='kchagk8y'
							if (this.device[i].productId == 'nau60otv' || this.device[i].productId == 'kchagk8y') {
								this.device[i].valueText = this.device[i].dps[1] / 10
								this.device[i].valueTexts = this.device[i].dps[2] / 10
							}
						}
						// console.log(this.device)
					} else { //加载失败
						uni.showToast({
							title: ret.msg,
							duration: 2000
						});
					}
				} catch (e) { //如果涂鸦智能无法连接
					uni.hideLoading(); //加载结束
					uni.showToast({
						title: '设备列表加载失败,请稍后再试',
					});
				}
			},

		}
	}
</script>

<style lang="less">
	//列表
	.list {
		border-radius: 30rpx;
		border-bottom: 3rpx solid #ebebeb;
		background-color: #FFFFFF;
		height: 300rpx;
		display: flex;
		width: 95%;
		margin-left: 20rpx;
		margin-top: 10rpx;
	}

	.list .image {
		width: 40%;
		text-align: center;
		margin-top: 20rpx;
		image {
			margin-top: 30rpx;
			align-items: center;
			height: 120rpx;
			width: 120rpx;
		}
	}
	.list .text {
		margin-top: 20rpx;
		font-size: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: bold;
	}
	.right {
		width: 45%;
		margin-top: 30rpx;
		text {
			font-size: 30rpx;
			font-weight: bold;
			// color: #000000;
		}
		view {
			margin-top: 30rpx;
			font-size: 30rpx;
		}
	
		
	}
	.right :nth-child(2){
		margin-top: 90rpx;
	}
	
	.rights {
		width: 45%;
		margin-top: 30rpx;
		text {
			font-size: 30rpx;
			font-weight: bold;
			// color: #000000;
		}
	
		view {
			margin-top: 30rpx;
			font-size: 30rpx;
		}
	}

	.list .tiem {
		display: flex;
		margin-top: 30rpx;
		margin-right: 30rpx;
		line-height: 90rpx;
		margin-left: auto;
		height: 90rpx;
		width: 200rpx;
		view {
			margin-left: auto;
			margin-right: 30rpx;
			color: #f0673d;
			width: 100rpx;
			font-size: 31rpx;
			line-height: 40rpx;
			white-space: normal;
			word-break: break-all;
			word-wrap: break-word;
		}
	}

	.dian {
		color: #b8e986;
		display: flex;
		margin-top: 15rpx;

		view {
			width: 14rpx;
			height: 14rpx;
			border: 1px solid #b8e986;
			border-radius: 10rpx;
			background: #b8e986;
			margin: 10rpx 10rpx 0rpx 0rpx;
		}
	}

	.dians {
		color: #9b9b9b;
		display: flex;
		// margin-right: 10rpx;
		margin-top: 15rpx;

		view {
			width: 14rpx;
			height: 14rpx;
			border: 1px solid #9b9b9b;
			border-radius: 10rpx;
			background: #9b9b9b;
			margin: 10rpx 10rpx 0rpx 0rpx;
		}
	}
</style>
